<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>学生成绩管理系统</title>
    <link rel="stylesheet" th:href="@{/webjars/bootstrap/4.0.0/css/bootstrap.css}"/>

    <script type="text/javascript" th:src="@{/webjars/jquery/3.3.1/jquery.js}"></script>
    <script type="text/javascript" src="js/jquery-2.0.3.min.js"></script>
    <script type="text/javascript" th:src="@{/webjars/bootstrap/4.0.0/js/bootstrap.js}"></script>
    <style>
        html, body {
            background-color: #F8F8FF;
        }

        a:hover {
            text-decoration: none;
        }

        th {
            cursor: pointer;
            vertical-align: middle;
            text-align: center;
        }

        td {
            vertical-align: middle;
            text-align: center;
        }
    </style>
</head>
<body>
<br/>
<div style="position:absolute;left:250px;">
    <form id="delsStu" style="display: inline">
        <btn th:attr="dels_uri=@{/stu/dels/}" class="btn btn-xs btn-danger dels">批量删除</btn>
    </form>
    <a class="btn btn-xs btn-primary" href="#" th:href="@{/add}" style="display: inline">添加学生</a>
</div>
<div style="position:absolute;left:470px;">
    <form th:action="@{/search}">
        <input type="text" maxlength="6" placeholder="输入要查找的学号" name="id"/>
        <input type="submit" value="查找"/>
    </form>
</div>
<div style="position:absolute;right:200px;">
    <div th:text="${session.loginUserName}"></div>
    <div th:switch="${session.loginUserRole}">
        <div th:case="0">普通管理员</div>
        <div th:case="1">超级管理员</div>
        <div th:case="*"></div>
    </div>
</div>
<div style="position:absolute;right:55px;">
    <a href="#" th:href="@{/exit}" class="btn btn-danger">
        <span class="glyphicon glyphicon-remove"></span> 安全退出
    </a>
</div>
<br/>
<div style="width:91%;position:absolute;left:4%;top:19%;">
    <table class="table table-striped table-hover table-bordered table-condensed" id="table1">
        <thead>
        <tr>
            <th><input type="checkbox" id="checkJudge" onclick="checkAll('status','checkJudge');"/></th>
            <th>学号</th>
            <th>姓名</th>
            <th>专业</th>
            <th>数据结构</th>
            <th>Java应用</th>
            <th>Mysql基础</th>
            <th>平均分</th>
            <th>表现</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr th:each="s:${stu}">
            <th><input type="checkbox" name="status"/></th>
            <td th:text="${s.id}" id="xueHao"></td>
            <td th:text="${s.name}"></td>
            <td th:text="${s.cla}"></td>
            <td th:text="${s.s1}"></td>
            <td th:text="${s.s2}"></td>
            <td th:text="${s.s3}"></td>
            <td th:text="${s.avg}"></td>
            <td th:text="${s.memo}"></td>
            <td>
                <a class="btn btn-sm btn-primary" style="float:left;" th:href="@{/stu/edit/} + ${s.id}">
                    编辑
                </a>
                <div th:switch="${session.loginUserRole}">
                    <div th:case="0"></div>
                    <div th:case="1">
                        <button th:attr="del_uri=@{/stu/del/} + ${s.id}" class="btn btn-sm btn-danger delBtn">
                            删除
                        </button>
                    </div>
                </div>
            </td>
        </tr>
        <form id="delStu">
            <input type="hidden" name="_method"/>
        </form>
        </tbody>
    </table>
    <div style="margin-left:36%;">
        <a href="#" th:href="@{/fans}" class="btn btn-warning">
            <span class="glyphicon glyphicon-plus"></span>我的关注
        </a>
        <a class="col-md-2 btn btn-info" th:href="@{/stu/page/prev/}">上一页</a>
        <a class="col-md-2 btn btn-info" th:href="@{/stu/page/next/}">下一页</a>
    </div>
</div>

<script>
    /*删除点击事件*/
    $(".delBtn").click(function () {
        //var msg = "确认删除" + $("#xueHao").text() + "号学生吗?";
        var msg = "确认删除该学生吗?";
        if (confirm(msg) == true) {
            /*发送删除请求*/
            $("#delStu").attr("action", $(this).attr("del_uri")).submit();
            return true;
        } else {
            return false;
        }
    });

    /*排序*/
    function makeSortable(table) {
        var headers = table.getElementsByTagName("th");
        for (var i = 1; i < headers.length - 1; i++) {
            (function (n) {
                var flag = false;
                headers[n].onclick = function () {
                    var tbody = table.tBodies[0];
                    var rows = tbody.getElementsByTagName("tr");
                    rows = Array.prototype.slice.call(rows, 0);

                    //第n个<td>元素的值对行排序
                    rows.sort(function (row1, row2) {
                        var cell1 = row1.getElementsByTagName("td")[n];
                        var cell2 = row2.getElementsByTagName("td")[n];
                        var val1 = cell1.textContent || cell1.innerText;
                        var val2 = cell2.textContent || cell2.innerText;

                        if (val1 < val2) {
                            return -1;
                        } else if (val1 > val2) {
                            return 1;
                        } else {
                            return 0;
                        }
                    });
                    if (flag) {
                        rows.reverse();
                    }
                    for (var i = 0; i < rows.length; i++) {
                        tbody.appendChild(rows[i]);
                    }

                    flag = !flag;
                }
            }(i));
        }
    }

    window.onload = function () {
        var table = document.getElementsByTagName("table")[0];
        makeSortable(table);
    }

    //批量删除点击事件 返回要删除的ids
    $(".dels").click(function () {
        var str = new Array();
        var i = 0;
        str[i++] = "0";
        $("input[type='checkbox']").each(function () {
            if ($(this).is(":checked")) {
                str[i++] = "1";
            } else {
                str[i++] = "0";
            }
        });
        console.log('str:' + str);
        var ids = new Array();
        var i = 1, k = 0;
        $("#table1 tr").each(function (rowIndex) {
            var text = $(this).children("td:nth-child(2)").text(); // 每一行的第2列
            if (parseInt(str[i++]) == 1) {
                ids[k++] = text;
            }
        });
        //session.setAttribute('ids',ids);
        $("#delsStu").attr("action", $(this).attr("dels_uri")).submit();
    });


    //全选和反选
    function checkAll(name, id) {
        if ($("#" + id).prop("checked")) {
            $("input[type='checkbox'][name='" + name + "']").prop("checked", true);//全选

        } else {
            $("input[type='checkbox'][name='" + name + "']").prop("checked", false);  //反选
        }
    }
</script>

</body>
</html>